<template>
  <div class="goodsindex">
    <!-- 搜索条件 -->
    <el-row :gutter="20" class="goodsindex-queryInfo">
      <!-- 角色搜索 -->
      <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
        <el-input
          class="goodsindex-queryInfo-li"
          v-model="queryInfo.role"
          clearable
          size="small"
          placeholder="请输入通知标题"
        ></el-input>
      </el-col>

      <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
        <el-button
          type="primary"
          class="goodsindex-queryInfo-li"
          size="small"
          @click="getListByCondition()"
          >搜索</el-button
        >
      </el-col>

      <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
        <el-button
          type="success"
          class="goodsindex-queryInfo-li"
          size="small"
          @click="addFromGood"
          >添加</el-button
        >
      </el-col>
    </el-row>
    <!-- 检索结果 -->
    <el-table :data="list" border fit highlight-current-row>
      <el-table-column label="ID" width="60px">
        <template slot-scope="scope">
          {{ scope.row.storyId }}
        </template>
      </el-table-column>
      <el-table-column label="标题" width="100px">
        <template slot-scope="scope">
          {{ scope.row.role }}
        </template>
      </el-table-column>
      <el-table-column label="内容">
        <template slot-scope="scope">
          {{ scope.row.abstracts }}
        </template>
      </el-table-column>

      <el-table-column
        label="Actions"
        align="center"
        width="250"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="editProduct(scope.row.storyId)"
          >
            编辑
          </el-button>
          <!--                    <el-button type="success" size="mini" @click="modifyPhoto(scope.row.storyId)">-->
          <!--                        修改图片-->
          <!--                    </el-button>-->
          <el-button
            size="mini"
            type="danger"
            @click="deleteProduct(scope.row.storyId)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!--        <el-row :gutter="20" class="goodsindex-list">-->
    <!--            <el-col :span="24" class="goodsindex-page-box">-->
    <!--                <el-pagination-->
    <!--                        :hide-on-single-page="true"-->
    <!--                        @size-change="handleSizeChange"-->
    <!--                        @current-change="handleCurrentChange"-->
    <!--                        :current-page="queryInfo.page"-->
    <!--                        :page-sizes="[10, 20, 50, 100]"-->
    <!--                        :page-size="queryInfo.pageSize"-->
    <!--                        layout="total, sizes, prev, pager, next, jumper"-->
    <!--                        :total="400">-->
    <!--                </el-pagination>-->
    <!--            </el-col>-->
    <!--        </el-row>-->
    <el-pagination
      :page-size="5"
      :pager-count="5"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="page"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: null,
      queryInfo: {
        role: "",
      },
      list: null,
    };
  },
  methods: {
    getList() {
      var vm = this;
      this.axios({
        method: "get",
        url: "/story/storylist/1",
      }).then(function (response) {
        vm.list = response.data.story;
        vm.total = response.data.total;
      });
    },
    getListByCondition() {
      var vm = this;
      this.axios({
        method: "get",
        url: "/story/storylistbyrole/1?role=" + vm.queryInfo.role,
      }).then(function (response) {
        vm.list = response.data.story;
        vm.total = response.data.total;
      });
    },
    editProduct(storyId) {
      this.$router.push("/story/update/" + storyId);
    },
    // modifyPhoto(storyId){
    //     this.$router.push("/story/updatephoto/"+storyId);
    // },
    deleteProduct(storyId) {
      var vm = this;
      vm.storyId = vm.$route.params.storyId;
      this.axios({
        method: "get",
        url: "/story/deleteById/" + storyId,
      }).then(function (response) {
        if (response.data == "success") {
          vm.$message({
            message: "删除成功",
            type: "success",
          });
          vm.getList();
        } else if (response.data == "fail") {
          vm.$message.error("删除失败");
        }
      });
    },
    addFromGood() {
      this.$router.push("/PublishNot");
    },
    page(currentPage) {
      var vm = this;
      this.axios({
        method: "get",
        url: "/story/storylist/" + currentPage,
      }).then(function (response) {
        vm.list = response.data.story;
        vm.total = response.data.total;
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>
<style scoped>
.goodsindex {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
/* 搜索 */
.goodsindex-queryInfo {
  margin-bottom: 10px;
}
.goodsindex-queryInfo-li {
  width: 100%;
  height: auto;
}
/* 列表 */
.goodsindex-list {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
/* 分页 */
.goodsindex-page-box {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
}
</style>
